<template>
  <div>
    <div class="topSearch">
      <!-- FIXME: 搜索内容 -->
      <div class="leftBox" style="max-width:100%;">
        <div class="searchbox">
          <em>单据日期：</em>
          <el-date-picker v-model="searchBox.beginDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptionsBegin" default-time="00:00:00" size="small" :clearable="false" placeholder="选择日期" style="width:190px" ></el-date-picker>~
          <el-date-picker v-model="searchBox.endDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptionsEnd" default-time="23:59:59" size="small" :clearable="false" placeholder="选择日期" style="width:190px" ></el-date-picker>
        </div>

        <div class="searchbox">
          <em>校区：</em>
          <el-select
            v-model="searchBox.school"
            @change="schoolChange"
            placeholder="请选择"
            size="small"
            style="width:120px"
          >
            <el-option label="全部" value key></el-option>
            <el-option
              v-for="item in searchCriteria.schoolList"
              :key="item.schoolId"
              :label="item.schoolName"
              :value="item.schoolId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>年级：</em>
          <el-select v-model="searchBox.grade" placeholder="请选择" size="small" style="width:120px">
            <el-option label="全部" value key></el-option>
            <el-option
              v-for="item in searchCriteria.gradeList"
              :key="item.gradeId"
              :label="item.gradeName"
              :value="item.gradeId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>是否缴清：</em>
          <el-select v-model="searchBox.isDifference" placeholder="请选择" size="small" style="width:120px">
            <el-option label="全部" value="" ></el-option>
            <el-option label="已缴清" value="N" ></el-option>
            <el-option label="未缴清" value="Y" ></el-option>
          </el-select>
        </div>

        <!-- <div class="searchbox">
          <em>班级：</em>
          <el-select v-model="searchBox.class" placeholder="请选择" size="small" style="width:120px">
            <el-option label="全部" value key></el-option>
            <el-option
              v-for="item in searchCriteria.classList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>-->

        <div class="searchbox">
          <em>学生姓名或身份证号：</em>
          <el-input
            v-model="searchBox.nameOrCard"
            size="small"
            style="width:200px"
            placeholder="请输入学生姓名或身份证号"
          ></el-input>
        </div>

        <div class="searchbox">
          <el-button type="primary" @click="LoadList" size="mini">查询</el-button>
          <el-button type="primary" @click="exportExcel" size="mini">导出</el-button>
        </div>
      </div>
      <div class="clear"></div>
    </div>

    <div class="contentBox">
      <el-table :data="tableData" :header-cell-style="headClass" border stripe style="width: 100%" height="90%">
        <el-table-column label="单据日期" width="170">
          <template slot-scope="scope">
            <span>{{scope.row.operateTime|newTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="serialNumber" label="缴费流水号" width="200"></el-table-column>
        <el-table-column prop="studentName" label="学生姓名" width="120"></el-table-column>
        <el-table-column prop="identityCardNumber" label="身份证号" width="200"></el-table-column>
        <el-table-column prop="schoolName" label="报名学校" width="180"></el-table-column>
        <el-table-column prop="gradeName" label="就读年级"></el-table-column>
        <el-table-column prop="isShiftIn" label="是否插班生" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.isShiftIn=='1'">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalScore" label="中考裸分" width="80"></el-table-column>
        <el-table-column prop="preBonusScore" label="预报名加分" width="100"></el-table-column>
        <el-table-column prop="bonusScore" label="政策加分" width="80"></el-table-column>
        <!-- <el-table-column prop="termCount" label="剩余学期数" width="90"></el-table-column> -->
        <!-- <el-table-column prop="myScore" label="升学成绩总分" width="110"></el-table-column> -->
        <el-table-column prop="specialAmount" label="标准金额（系统计算）" width="180">
          <template slot-scope="scope">
          <span v-if="scope.row.specialAmount==''||scope.row.specialAmount==null||scope.row.specialAmount==undefined">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.specialAmount?scope.row.specialAmount:0).toFixed(2)*1000<0}" v-else>{{scope.row.specialAmount|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column label="增/减金额" width="100">
          <template slot-scope="scope">
            <span :class="{fuFont:parseFloat(zengjian(scope.row)).toFixed(2)*1000<0}" >{{zengjian(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payableMoney" label="应收合计（招办填写）" width="100">
          <template slot-scope="scope">
          <span v-if="scope.row.payableMoney==''||scope.row.payableMoney==null||scope.row.payableMoney==undefined">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.payableMoney?scope.row.payableMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.payableMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="money" label="实收合计" width="100">
          <template slot-scope="scope">
          <span v-if="scope.row.money==''||scope.row.money==null||scope.row.money==undefined">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.money?scope.row.money:0).toFixed(2)*1000<0}" v-else>{{scope.row.money|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column label="差异" width="100">
          <template slot-scope="scope">
            <span>{{ (parseFloat(scope.row.payableMoney)-parseFloat(scope.row.money)).toFixed(2)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="凭据说明" width="110">
          <template slot-scope="scope">
            <!-- <img v-if="scope.row.speciallyProof && (parseFloat(scope.row.payableMoney).toFixed(2)*1000 < parseFloat(scope.row.specialAmount).toFixed(2)*1000)" @click="showImgBig(imgleft+scope.row.speciallyProof)" style="width:50px;cursor: pointer;" :src="imgleft+scope.row.speciallyProof"> -->
            <!-- <span v-else-if="parseFloat(scope.row.payableMoney).toFixed(2)*1000 >= parseFloat(scope.row.specialAmount).toFixed(2)*1000">无</span> -->
            <el-button v-if="scope.row.speciallyProof && (parseFloat(scope.row.payableMoney).toFixed(2)*1000 < parseFloat(scope.row.specialAmount).toFixed(2)*1000)" @click="watchFiles(scope.row)" type="primary" size="mini">查看附件</el-button>
            <span v-else>无</span>
            <!-- <el-image style="width: 50px; height: 50px" :src="imgleft+scope.row.speciallyProof" :preview-src-list="imgleft+scope.row.speciallyProof">
  </el-image> -->
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="补录说明" width="200"></el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination
          background
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page.sync="pageIndex"
          :hide-on-single-page="true"
          :total="pageAll"
        ></el-pagination>
      </div>
    </div>

    <el-dialog title="查看附件" :visible.sync="layerImg">
      <div class="layerMaxHeight">
        <div class="layerBox">
        <div class="imgBoxList">
          <div class="imgBox" v-for="(a,index2) in fileList" :key="index2"><img @click="showImgBig(imgleft+a)"  :src="imgleft+a"></div>
        </div>
        </div>
      </div>
    </el-dialog>

    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" style="z-index:20000" />
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  components: { ElImageViewer },
  data() {
    return {
      ccc: "实收报表",
      pageIndex: 1,
      pageAll: 0,
      imgleft:'',
      showViewer:false,
      url:'',
      searchBox: {
        beginDate: "",
        endDate: "",
        school: "",
        grade: "",
        class: "",
        isDifference:"",
        nameOrCard: ""
      },
      searchCriteria: {
        schoolList: [],
        schoolList1:[],
        gradeList: [],
        classList: [],
      },
      tableData: [{ projectName: "11111" }],
      layerImg:false,
      fileList:[],
      pickerOptionsBegin:{
         disabledDate:time=>{
          return time.getTime() > new Date(this.searchBox.endDate).getTime();
        }
      },
      pickerOptionsEnd:{
         disabledDate:time=>{
          return time.getTime() < new Date(this.searchBox.beginDate).getTime();
        }
      }
    }
  },
  // 监视
  watch:{
    "searchBox.school":function(v){
      if(v){
        this.LoadList();
      }
    },
    "searchBox.grade":function(v){
      if(v){
        this.LoadList();
      }
    }

  },
  filters: {
    newTime: function(val) {
      if (!val) return "";
      return val.slice(0, 19);
    },
    moneyStyle(val) {
      if(!val)return '--';
      var nm = 0;
      nm = parseFloat(val).toFixed(2);
      return nm;
    }
  },
  mounted() {
    this.getCondition();
    this.$nextTick(() => {
      this.LoadList();
    });
  },
  methods: {
    // 头部样式
    headClass:function(){
      return 'text-align: center;'
    },
    // TODO:获取搜索条件
    getCondition: function() {
      this.$api.trainingReduction
        .GetSearchCriteria(this.searchBox.school)
        .then(res => {
          //console.log("获取搜索条件", res);
          if(this.searchBox.school==""){
            this.searchCriteria.schoolList = res.data.result.schoolList;
          }
          this.searchCriteria.gradeList = res.data.result.gradeList;
        });
    },
    schoolChange: function(event) {
      this.searchBox.grade = "";
      this.getCondition();
    },
    // TODO:获取实收列表
    LoadList: function() {
      if(this.searchBox.endDate){
      this.searchBox.endDate = this.searchBox.endDate.replace(/00:00:00/,"23:59:59");
      }
      this.$api.trainingReduction
        .GetSpecialSrainingNetReceiptsList(
          "list",
          this.searchBox.nameOrCard,
          this.searchBox.beginDate,
          this.searchBox.endDate,
          this.searchBox.school,
          this.searchBox.grade,
          this.searchBox.isDifference,
          this.pageIndex
        )
        .then(res => {
          //console.log("获取实收列表", res);
          this.tableData = res.data.result.list;
          this.imgleft = res.data.result.url;
          this.pageAll = res.data.result.total;
        });
    },
    exportExcel: function() {
      if(this.searchBox.endDate){
      this.searchBox.endDate = this.searchBox.endDate.replace(/00:00:00/,"23:59:59");
      }
      this.$api.trainingReduction
        .GetSpecialSrainingNetReceiptsList(
          "export",
          this.searchBox.nameOrCard,
          this.searchBox.beginDate,
          this.searchBox.endDate,
          this.searchBox.school,
          this.searchBox.grade,
          this.searchBox.isDifference,
          this.pageIndex
        )
        .then(res => {
          //console.log("导出实收列表", res);
          window.open(res.data.result)
        });
    },
    // 分页页面切换
    handleCurrentChange: function(val) {
      this.pageIndex = val;
      this.LoadList();
    },
    zengjian: function(obg) {
      return ((parseFloat(obg.money).toFixed(2) * 1000 - parseFloat(obg.specialAmount).toFixed(2) * 1000) /1000);
    },
    // 显示大图
    showImgBig:function(u){
      this.showViewer = true
      this.url = u
    },
    // 关闭大图查看
    closeViewer:function(){
      this.showViewer = false;
    },
    // 查看附件弹层
    watchFiles:function(obg){
     this.fileList = [];
     this.fileList =  obg.speciallyProof.split(",")
     this.layerImg = true;
    }
  },
  computed: {}
};
</script>

<style>
.el-image-viewer__close{ top: 80px; right: 80px; color: #FFF;}
</style>
